import styled from 'styled-components'
import Icon from '@/components/Icon'
import { StyledMediaContainer } from '@/style/global'

export const StyledWrap = styled(StyledMediaContainer)`
	margin-top: 10px;
	background: #ffffff;
	font-size: 12px;
	color: #4e4e4e;
	.nav {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		.title {
			margin-left: 9px;
		}
	}
	.line {
		height: 30px;
		line-height: 30px;
		.label {
			display: inline-block;
			color: #8b8b8b;
			width: 75px;
		}
		.time {
			margin-left: 139px;
		}
	}
	.operate-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		.search-bar {
			display: flex;
			align-items: center;
			.operator-input,
			.name-input,
			.operational-input {
				margin-right: 50px;
			}
			.search-btn {
				margin-left: 20px;
				margin-right: 10px;
			}
			.total-msg {
				color: #4e4e4e;
				font-size: 12px;
				.reset {
					color: #007ac0;
					cursor: pointer;
					margin-left: 9px;
					text-decoration: underline;
				}
			}
		}
	}
`

export const BackIcon = styled(Icon)`
	background-position: -240px -335px;
	width: 30px;
	height: 30px;
	&:hover {
		background-position: -270px -335px;
	}
`
